import React, {useState, useTransition} from 'react';
import {faker} from "@faker-js/faker/locale/en";
let arr = []
for(let i = 0; i < 10000; i++) {
    arr.push(faker.person.fullName())
}

const FakerDemo = () => {

    const [list, setList] = useState(arr)

    const [isPending, startTransition] = useTransition()

    function changeKeyword(e) {
        startTransition(() => {
            const newList = arr.filter((item) => item.includes(e.target.value));
            console.log(newList.length)
            setList(newList)
        })
    }

    return (
        <div>
            <h1>FakerDemo</h1>
            <input type='text' onInput={changeKeyword}/>
            {isPending && <span>Loading...</span>}
            <ul>
                {
                    list.map((item, i) => (
                        <li key={i} style={{color: `'${item}'`}}>{item}</li>
                    ))
                }
            </ul>
        </div>
    );
};

export default FakerDemo;